<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>signature_demo</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script src="jSignature.min.js"></script>
<!--    <script src="../../js/jquery.js"></script>-->
<!--    <script src="../../js/jSignature.js"></script>-->
    <style type="text/css">
        #signature{
            position: absolute;
            border: 5px solid red;
            width: 90%;
            height: 45%;
            left: 5%;
            top: 25%;
        }
        .clearBtn{
            position: absolute;
            width: 20%;
            height: 10%;
            left: 25%;
            top: 80%;
        }
        .saveBtn{
            position: absolute;
            width: 20%;
            height: 10%;
            left: 55%;
            top: 80%;
        }
    </style>
 
    <script type="text/javascript">
        //初始化画布
        $(document).ready(function(){
            $("#signature").jSignature({width:"100%",height:"100%",color:"#000",lineWidth:4});
 
 
        });
        //重置画布
        function clearSig(){
            $("#signature").jSignature("reset");
        }
        //将画布内容保存为base64编码字符串
        function saveImg(){
            if( $("#signature").jSignature('getData', 'native').length === 0){
                alert("请签名后再提交！");
                return;
            }
            var con=confirm("提交后不可更改，确认提交签名？");
            if(con===false) return;
 
            //保存将签名的画布保存为base64编码字符串
            var sig=$("#signature");
            var datapair=sig.jSignature("getData","image");
            console.log("data:"+ datapair[0] + "," + datapair[1])
            // $("#img").attr("src","data:"+ datapair[0] + "," + datapair[1]);
            // $("#img").attr("src","data:"+sig.jSignature('getData'));
            // console.log(sig.jSignature("getData"));
            //封装base64字符串，将其提交到后端
            var postData={};
            postData.imgStr=datapair[1];
            $.post("http://localhost:8099/SignatureSave",postData,function (data) {
                alert(data);
            })
        }
        
    </script>
 
</head>
<body>
<div id="signature"></div>
<button class="clearBtn" onclick="clearSig()">重置</button>
<button class="saveBtn" onclick="saveImg()">获取</button>
</body>
</html>